<?xml version="1.0" encoding="UTF-8"?>
<!--
To change this template, choose Tools | Templates
and open the template in the editor.
-->
<!DOCTYPE html>
<ui:composition xmlns="http://www.w3.org/1999/xhtml"  
                xmlns:h="http://java.sun.com/jsf/html"  
                xmlns:f="http://java.sun.com/jsf/core"  
                xmlns:p="http://primefaces.org/ui"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                template="profile.xhtml">

    <ui:define name ="body">
        <div id="sidebar">
            <ui:include src="userStats.xhtml"/>
            <p:panel style="margin: 8px">
                algo
            </p:panel >
            <p:panel style="margin: 8px">
                otra cosa
            </p:panel>
        </div>
        <div id="main">
            <p:panel style="margin: 8px 8px 8px 0px;">
                 <p:panel header="followers" toggleable="true">
                     <p:dataTable value="#{sessionController.user.followers}" var="follower"
                                  paginator="true" rows="10" >
                         <p:column headerText="id">
                             <h:outputText value="#{follower.id}"/>
                         </p:column>
                         <p:column headerText="name">
                             <h:outputText value="#{follower.screenName}"/>
                         </p:column>
                          <p:column headerText="follows">
                             <h:outputText value="#{follower.followsCount}"/>
                         </p:column>
                         <p:column headerText="followers">
                             <h:outputText value="#{follower.followersCount}"/>
                         </p:column>
                         <p:column headerText="tweets">
                             <h:outputText value="#{follower.tweetsCount}"/>
                         </p:column>
                     </p:dataTable>
                 </p:panel>
                <p:panel header="follows" toggleable="id">
                     <p:dataTable value="#{sessionController.user.follows}" var="follow"
                                  paginator="true" rows="10" >
                         <p:column headerText="text">
                             <h:outputText value="#{follow.id}"/>
                         </p:column>
                          <p:column headerText="name">
                             <h:outputText value="#{follow.screenName}"/>
                         </p:column>
                          <p:column headerText="follows">
                             <h:outputText value="#{follow.followsCount}"/>
                         </p:column>
                         <p:column headerText="followers">
                             <h:outputText value="#{follow.followersCount}"/>
                         </p:column>
                         <p:column headerText="tweets">
                             <h:outputText value="#{follow.tweetsCount}"/>
                         </p:column>
                     </p:dataTable>
                 </p:panel>
                <p:panel header="tweets" toggleable="true">
                    <p:dataTable value="#{sessionController.user.tweets}" var="tweet">
                        <p:column headerText="text">
                            <h:outputText value="#{tweet.text}"/>
                        </p:column>
                        <p:column headerText="at">
                            <h:outputText value="#{tweet.createdAt}">
                                <f:convertDateTime type="date" pattern="dd/MM/yyyy"/>
                            </h:outputText>
                        </p:column>
                    </p:dataTable>
                </p:panel>
            </p:panel>
        </div>
    </ui:define>   
</ui:composition>

